<template>
  <div class="app-container">
    <el-form :model="form_create" label-width="120px">
      <h4>盘点信息</h4>
      <p class="jc_dialog_block">
        <el-form-item label="盘点单号">
          <el-input placeholder="自动生成" disabled></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-input placeholder="默认当前"></el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select placeholder="默认账户 根据权限更改" v-model="pl88">
            <el-option label="可用" value="enabled"></el-option>
            <el-option label="不可用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </p>
      <p class="jc_dialog_block">
        <el-form-item label="操作人">
          <el-input placeholder="默认当前登录"></el-input>
        </el-form-item>
      </p>
      <p class="jc_dialog_block">
        <el-form-item label="备注">
          <el-input type="textarea"></el-input>
        </el-form-item>
      </p>
    </el-form>
    <h4>备件信息</h4>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <ChooseSpareParts v-model="getSparePartsData"></ChooseSpareParts>
      <el-input class="jc_scanCode"placeholder="光标置于本处后开始扫码，备件编码"></el-input>
    </el-button-group>
    <el-button-group class="jc_btn_wrap jc_btn_right">
      <el-radio-group v-model="unit" >
        <el-radio :label="1">换算单位</el-radio>
        <el-radio :label="0">计量单位</el-radio>
      </el-radio-group>
    </el-button-group>
    <el-table v-if="unit" :data="getSparePartsData"   border fit highlight-current-row class="jc_table_wrap">
      <el-table-column type="index" width="70" label="编号">
      </el-table-column>
      <el-table-column label='操作'>
        <template scope="scope">
          <el-button type="text" @click="deleteSparePartRow(scope.$index, getSparePartsData)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备件编号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="备件名称">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="规格型号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="计量单位">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="账面数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="实际数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="换算比例">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="换算单位">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="换算数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="盘亏数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="盘盈数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="备注">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
    </el-table>
    <el-table v-else="unit" :data="getSparePartsData"   border fit highlight-current-row class="jc_table_wrap">
      <el-table-column type="index" width="70" label="编号">
      </el-table-column>
      <el-table-column label='操作'>
        <template scope="scope">
          <el-button type="text" @click="deleteSparePartRow(scope.$index, getSparePartsData)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="备件编号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="备件名称">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="规格型号">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="计量单位">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="账面数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="实际数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="换算比例">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="盘亏数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="盘盈数量">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
      <el-table-column label="备注">
        <template scope="scope">
          {{scope.row.description}}
                </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer" style="display:block;text-align: center;margin-top: 10px;">
      <el-button type="primary" @click="submitCreateForm">确定</el-button>
      <el-button @click="goToBack">取消</el-button>
    </div>
  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";
  import ChooseSpareParts from "../components/Choice_spareParts"
  export default {
    components: {
      ChooseSpareParts
    },
    data() {
      return {
        searchList: {},
        create_visible:false,
        form_create: {},
        list: null,
        activeName: 'first',
        unit: 1,
        total:0,
        multipleSelection: [],
        getSparePartsData: [],
        pl88: '',

      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true;
        console.log('getSparePartsData',this.getSparePartsData);
      },
      goToBack() {
        this.$router.push({path:'/warehouse/inventory'});
      },
      submitCreateForm() {

      },
      deleteSparePartRow(index, rows) {
        rows.splice(index, 1);
      },
      deleteRow() {
        alert('用this.multipleSelection获得要删除的数据');
        console.log('this.multipleSelection',this.multipleSelection);
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
